<!-- 审核通过费用 -->
<template>
  <div class="examine-pass">
    <!-- 顶部标题栏组件 -->
    <top-header :leftArrow="leftArrow"></top-header>
    <!-- 查询内容框 -->
    <van-cell title="查询内容" is-link :value="staffName" @click="showSearch = true" />
    <!-- 内容数列 -->
    <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
      <van-cell v-for="(item, index) in costList" :key="index">
        <!-- 每列的上层 -->
        <template #title>
          <div class="van-title">
            <div class="van-top">
              <span class="custom-title">{{ item.svr_date | filterTime }}</span>
              <van-tag type="primary" color="burlywood">{{ item.costTotal }}</van-tag>
              <van-tag plain type="primary" color="burlywood" @click.stop="toDetail(item)">查看</van-tag>
            </div>
            <span class="cust-title">{{ item.cust_name }}</span>
          </div>
        </template>
        <!-- 每列的下层 -->
        <template #label>
          <van-tag plain type="primary" color="burlywood">{{ item.fress_man }}</van-tag>
          <span class="custom-title">{{ item.request }}</span>
        </template>
      </van-cell>
    </van-list>
    <!-- 查询内容弹出层 -->
    <van-popup v-model="showSearch" position="bottom">
      <van-field readonly clickable name="dateTime" :value="searchObj.dateTime" label="查询日期" placeholder="点击选择查询年月"
        @click="showPicker = true" />
      <div class="task-btn">
        <van-button type="info" size="small" block color="burlywood" @click="search">查询</van-button>
      </div>
    </van-popup>
    <!-- 日期选择器 -->
    <van-popup v-model="showPicker" position="bottom">
      <van-datetime-picker v-model="currentDate" type="year-month" title="选择年月" :min-date="minDate" :max-date="maxDate"
        :formatter="formatter" @confirm="onConfirm" @cancel="onCancel" />
    </van-popup>
  </div>
</template>

<script>
import { TopHeader } from '@/components'
import { GetCostChecked } from '@/request/api'
export default {
  name: 'ExaminePass',
  components: {
    TopHeader
  },
  filters: {
    filterTime (val) {
      return val.slice(0, 10)
    }
  },
  data () {
    return {
      leftArrow: true, // 顶部标题栏组件是否有返回按钮
      loading: false,
      finished: false,
      pageIndex: 0,
      costList: [],
      power: sessionStorage.getItem('power'), // 用户权限
      showCost: false,
      showSearch: false, // 查询内容弹框是否显示
      examine: {
        depComment: '同意',
        depResult: false
      },
      searchObj: { // 查询内容弹出层表单数据
        dateTime: ''
      },
      staffName: '', // 查询人员名称
      showPicker: false, // 日期选择器是否显示
      minDate: new Date(2005, 9, 1), // 日期最小值
      maxDate: new Date(2030, 10, 1), // 日期最大值
      currentDate: new Date(),
      // peoShowPicker: false, // 查询人员选择器是否显示
      peoColumns: [], // 查询人员选择器数据
      approvalFormId: null // 审核id
    }
  },
  created () {
    this.getCostList()
  },
  methods: {
    onLoad () {
      // 异步更新数据
      setTimeout(() => {
        this.pageIndex++
        const param = {
          staffId: sessionStorage.getItem('userId'),
          page: this.pageIndex,
          pageCount: 10
        }
        GetCostChecked(param).then(res => {
          this.costList = [...this.costList, ...res.Data]
        })
        // 加载状态结束
        this.loading = false
        // 数据全部加载完成
        if (10 * (this.pageIndex + 1) >= this.costList.length) {
          this.finished = true
        }
      }, 1000)
    },
    // 获取费用通过数据
    getCostList (val) {
      // 有查询条件
      if (val) {
        if (this.power === '部门审核人') {
          const param = {
            staffId: '',
            year: val.dateTime.split('-')[0],
            month: val.dateTime.split('-')[1],
            page: this.pageIndex,
            pageCount: 10
          }
          console.log(param)
          GetCostChecked(param).then(res => {
            console.log(res)
            if (res.Tag === 1) {
              this.costList = res.Data
            }
          })
        } else {
          const param = {
            staffId: sessionStorage.getItem('userId'),
            year: val.dateTime.split('-')[0],
            month: val.dateTime.split('-')[1],
            page: this.pageIndex,
            pageCount: 10
          }
          console.log(param)
          GetCostChecked(param).then(res => {
            console.log(res)
            if (res.Tag === 1) {
              this.costList = res.Data
            }
          })
        }
        // 无查询条件
      } else {
        if (this.power === '部门审核人') {
          const param = {
            staffId: '',
            page: this.pageIndex,
            pageCount: 10
          }
          GetCostChecked(param).then(res => {
            console.log(res)
            if (res.Tag === 1) {
              this.costList = res.Data
            }
          })
        } else {
          const param = {
            staffId: sessionStorage.getItem('userId'),
            page: this.pageIndex,
            pageCount: 10
          }
          GetCostChecked(param).then(res => {
            console.log(res)
            if (res.Tag === 1) {
              this.costList = res.Data
            }
          })
        }
      }
    },
    // 日期转换
    formatter (type, val) {
      if (type === 'year') {
        return `${val}年`
      } else if (type === 'month') {
        return `${val}月`
      }
      return val
    },
    // 日期选择器
    onConfirm (val) {
      let year = val.getFullYear()
      let month = val.getMonth() + 1
      this.searchObj.dateTime = val
      this.searchObj.dateTime = `${year}-${month}`
      this.showPicker = false
    },
    onCancel () {
      this.showPicker = false
    },
    // 查询有条件的费用通过数据
    search () {
      if (this.searchObj.dateTime) {
        this.getCostList(this.searchObj)
        this.showSearch = false
      } else {
        this.$toast('请先选择查询年月')
      }
    },
    // 跳转到详情页
    toDetail (value) {
      this.$router.push({
        name: 'CostDetail',
        params: value
      })
    }
  }
}
</script>

<style scoped lang="less">
.examine-pass {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  .van-list {
    flex: 1;
    overflow: auto;
    height: calc(100% - 1.2rem);
    &::after {
      border: none;
    }
    .van-cell {
      .van-cell__title {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        .van-steps {
          padding: 0;
          /deep/ .van-steps__items {
            margin: 0;
          }
        }
        .van-title {
          display: flex;
          .van-top {
            flex: 1;
            display: flex;
            align-items: center;
          }
          .cust-title {
            flex: 1;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            text-align: right;
          }
        }
        .van-tag {
          margin: 0 2px;
        }
        .van-cell__label {
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: pre-line;
          .van-cell {
            .van-cell__value {
              flex: 2;
              text-align: left;
            }
          }
        }
      }
    }
  }
  .task-btn {
    margin: 0.4rem;
    display: flex;
  }
}
</style>
